<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <script src="/Js/Vue/Vue.js"></script>
    <script src="/Js/Jquery-3.4.1.js"></script>
    <link rel="stylesheet" href="/Css/index.css">
    <link rel="stylesheet" href="/Css/Boot/Boot.css">
    <script src="/Js/Boot/Boot.js"></script>
    <script src="/Js/Public.js"></script>
</head>
<body>
    <div id="main">
        <!-- Fixed navbar -->
        <nav class="navbar navbar-default navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand">TheShy Blog</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">首页</a></li>
                        <li><a href="#about">关于</a></li>
                        <li><a href="#contact">联系我</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">文章分类 <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li class="dropdown-header">后端</li>
                                <li><a href="#">Golang</a></li>
                                <li><a href="#">PHP</a></li>
                                <li><a href="#">Node.JS</a></li>
                                <li role="separator" class="divider"></li>
                                <li class="dropdown-header">前端</li>
                                <li><a href="#">JavaScript</a></li>
                                <li><a href="#">Vue.JS</a></li>
                            </ul>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a style="cursor: pointer" onclick="window.open('https://github.com/17683954109')">Github</a></li>
                    </ul>
                </div><!--/.nav-collapse -->
            </div>
        </nav>

        <div class="container" id="mainCover">

            <!-- Main component for a primary marketing message or call to action -->
            <div class="jumbotron">
                <h1>Navbar example</h1>
                <p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
                <p>To see the difference between static and fixed top navbars, just scroll.</p>
                <p>
                    <a class="btn btn-lg btn-primary" role="button">View navbar docs &raquo;</a>
                </p>
            </div>

        </div>
    </div>

<script>

    function Index() {

        App.call(this);

        let that = this;

        let vue = new Vue({
            el: '#main',
            data: {
                backgroundImg: "/Image/index.jpeg"
            },
            methods: {
                setBack: function () {
                    that.getEl('?body', 0).style.backgroundImage = "url('"+this.backgroundImg+"')";
                }
            },
        });

        vue.setBack();

    }

    let app = new Index();

</script>
</body>
</html>